<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { fixCoverImageUrl } from '@/utils/fixImageUrls'
import { closeFeedback, getFeedbackDetail } from '@/api/index'

const complainId = ref(null)
const textList = [
  { name: '反 馈 人 :', value: '' },
  { name: '联系电话:', value: '' },
  { name: '反馈时间:', value: '' },
  { name: '反馈内容:', value: '' },
  { name: '状      态:', value: '' },
]
const imgList = ref([])
const replyList = ref([])
const feedbackStatus = ref(0)

async function onGetFeedbackDetail(id) {
  const { result } = await getFeedbackDetail(id)
  textList[0].value = result.name
  textList[1].value = result.phone
  textList[2].value = result.createTime
  textList[3].value = result.content
  textList[4].value = renderStatus(result.status)
  replyList.value = result.replys
  imgList.value = result.files.map(item => ({ src: fixCoverImageUrl(item) }))
  feedbackStatus.value = result.status
}

function renderStatus(status) {
  const map = {
    '0': '新提交',
    '1': '已受理',
    '10': '已完成',
    '-1': '已驳回',
    '-10': '已关闭',
  }
  return map[status.toString()]
}

const showImg = ref(false)
const currentShowImg = ref(0)
function onShowImg(index) {
  currentShowImg.value = index
  showImg.value = true
}

const isClose = computed(() => feedbackStatus.value === -10)

const confirmVisible = ref(false)
async function onCloseInvoice() {
  try {
    await uni.showLoading({ title: '请稍后' })
    const { success, message } = await closeFeedback(complainId.value)
    uni.hideLoading()

    if (!success)
      throw new Error(message)

    await uni.showToast({ icon: 'success', title: '关闭成功' })
    await onGetFeedbackDetail(complainId.value)
  }
  catch (e) {
    await uni.showToast({ icon: 'none', title: e.message, duration: 2000 })
  }
}

onLoad(({ id }) => {
  complainId.value = id
  onGetFeedbackDetail(id)
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar title="查看反馈记录" custom-color="#000" left-show placeholder fixed />
    <main class="px-2 py-3.5 mt-1.5 bg-white">
      <view class="text-28">
        <view v-for="({ name, value }, index) in textList" :key="index" class="mb-1.5">
          <text class="font-semibold whitespace-pre">
            {{ name }}
          </text>
          <text class="pl-1">
            {{ value }}
          </text>
        </view>
      </view>
      <!-- 图片 -->
      <view v-if="imgList.length > 0" class="pt-4 flex justify-around">
        <image
          v-for="(item, index) in imgList"
          :key="item.src"
          class="h-189 w-335"
          :src="item.src"
          mode="aspectFill"
          @click="onShowImg(index)"
        />
        <nut-image-preview :show="showImg" :images="imgList" :init-no="currentShowImg" @close="showImg = false" />
      </view>
      <view v-if="!isClose" class="px-6.5 py-5.5">
        <nut-button plain block type="primary" @click="confirmVisible = true">
          关闭反馈
        </nut-button>
      </view>
      <!-- 回复 -->
      <template v-if="replyList.length > 0">
        <view v-for="item in replyList" :key="item.id">
          <nut-divider :custom-style="{ color: '#ccc' }" />
          <view class="text-28">
            <text class="font-semibold">
              回复:
            </text>
            <text class="pl-1">
              {{ item.content }}
            </text>
          </view>
        </view>
      </template>
    </main>
    <nut-dialog v-model:visible="confirmVisible" content="确认关闭反馈吗?" @ok="onCloseInvoice" />
  </view>
</template>
